<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Brighton Times</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <!-- 构建家乡 (Home Town) 项目应用 （第一部分）
1） 设置初始缩放比例， 并添加一个 <meta> 视图窗口。

2） 需要调整一下 CSS 和标签，使所有内容都在一列里显示。 请确认使用的是相对宽度，这样内容才会根据视窗宽度进行自动调整。

3） 确保你的点按目标很容易被点击。

4） 完成修改后，请在不同视窗内测试网页，可以分别在手机、平板电脑和电脑桌面上都测试一下。 -->

  <header class="header">
    <div class="header__inner">
      <img class="header__logo" src="images/city.png" alt="iconic view of a cityscape">
      <h1 class="header__title">
        The Brighton Times
      </h1>
    </div>
  </header>

  <nav id="drawer" class="nav">
    <ul class="nav__list">
      <li class="nav__item"><a href="#">News</a></li>
      <li class="nav__item"><a href="#">Events</a></li>
      <li class="nav__item"><a href="#">Culture</a></li>
      <li class="nav__item"><a href="#">Blog</a></li>
    </ul>
  </nav>

  <main>
    <section class="content">
      <section class="hero">
        <article class="description">
          <h2>Absolutely astonishing breaking news!</h2>
          <p>Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four loko. Organic raw denim Vice
            keffiyeh lomo Kickstarter art lomo Kickstarter art four loko.</p>
        </article>
      </section>

      <section class="news top-news">
        <h2 class="news__title">Top news <a href="#" class="news__more">+ more</a></h2>
        <ul>
          <li class="top-news__item">
            <a href="#">Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache.</a>
          </li>
          <li class="top-news__item">
            <a href="#">Squid lomo Kickstarter art lomo Kickstarter art party cronut scenester.</a>
          </li>
          <li class="top-news__item">
            <a href="#">Organic raw denim lomo Kickstarter art Vice keffiyeh four loko.</a>
          </li>
          <li class="top-news__item">
            <a href="#">Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four loko.</a>
          </li>
        </ul>
      </section>

      <section class="scores">
        <table class="scores__table">
          <thead>
            <tr>
              <th>date</th>
              <th>team</th>
              <th colspan="2">score</th>
              <th>team</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Friday</td>
              <td>Bears</td>
              <td>95</td>
              <td class="winner">109</td>
              <td class="winner">Cubs</td>
            </tr>
            <tr>
              <td>Friday</td>
              <td class="winner">Otters</td>
              <td class="winner">3</td>
              <td>1</td>
              <td>Cubs</td>
            </tr>
            <tr>
              <td>Saturday</td>
              <td class="winner">Wolves</td>
              <td class="winner">7</td>
              <td>0</td>
              <td>Panthers</td>
            </tr>
            <tr>
              <td>Sunday</td>
              <td>Hawks</td>
              <td>11</td>
              <td class="winner">12</td>
              <td class="winner">Capons</td>
            </tr>
            <tr>
              <td>Sunday</td>
              <td class="winner">Stags</td>
              <td class="winner">6</td>
              <td>2</td>
              <td>Foxes</td>
            </tr>

          </tbody>
        </table>
      </section>

      <section class="weather">
        <span class="weather__location">Brighton, UK</span>
        <span class="weather__desc">Sunny</span>
        <span class="weather__today">
          <img class="weather__today__image" src="images/weather.png" alt="icon of a partially sunny day"><span
            class="weather__today__temp">13</span><span class="weather__today__deg">&deg;C</span>
        </span>
        <ul class="weather__next">
          <li class="weather__next__item">
            <span>Mon</span>
            <img class="weather__next__image" src="images/sunny.png" alt="icon of a sunny day">
            <span>13 &deg;C</span>
          </li>
          <li class="weather__next__item">
            <span>Tues</span>
            <img class="weather__next__image" src="images/cloudy.png" alt="icon of a cloudy day">
            <span>13 &deg;C</span>
          </li>
          <li class="weather__next__item">
            <span>Wed</span>
            <img class="weather__next__image" src="images/cloudy.png" alt="icon of a cloudy day">
            <span>13 &deg;C</span>
          </li>
          <li class="weather__next__item">
            <span>Thu</span>
            <img class="weather__next__image" src="images/rain.png" alt="icon of a rainy day">
            <span>13 &deg;C</span>
          </li>
          <li class="weather__next__item">
            <span>Fri</span>
            <img class="weather__next__image" src="images/sunny.png" alt="icon of a sunny day">
            <span>13 &deg;C</span>
          </li>
        </ul>
      </section>

      <section class="news recent-news">
        <h2 class="news__title">Latest news <a href="#" class="news__more">+ more</a></h2>
        <ul>
          <li class="snippet">
            <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
            <h3 class="snippet__title"><a href="#">Gastropub distillery Marfa farm-to-table</a></h3>
            <p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache.
              Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo
              Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko.
              Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh
              four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.
            </p>
          </li>
          <li class="snippet">
            <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
            <h3 class="snippet__title"><a href="#">Organic raw keffiyeh four loko.</a></h3>
            <p>Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice
              keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw
              denim Vice loko.
            </p>
          </li>
          <li class="snippet">
            <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
            <h3 class="snippet__title"><a href="#">Kickstarter art party cronut scenester.</a></h3>
            <p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache.
              Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo
              Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko.
            </p>
          </li>
          <li class="snippet">
            <img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
            <h3 class="snippet__title"><a href="#">Squid lomo Kickstarter art party cronut </a></h3>
            <p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache.
              Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo
              Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko.
            </p>
          </li>
        </ul>
      </section>
    </section>
    <footer>
      <ul>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Follow us on Twitter</a></li>
        <li><a href="#">RSS</a></li>
      </ul>
    </footer>
  </main>
</body>

</html>